<template>
  <div id="app">
    <h1>组件通信</h1>
    <ul>
      <li v-for="good in showGoods" :key="good.id">{{ good.name }}</li>
    </ul>
    <Pagination :total="goods.length" ::size="prePage" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  name: "App",
  components: {
    Pagination,
  },
  data() {
    return {
      // 在父级有一组数据，但是这组数据，我们并不想一次性全部显示出来
      // 原始的所有数据
      goods: new Array(66).fill("").map((item, index) => {
        return {
          id: index,
          name: (index + "").repeat(10),
        };
      }),
      //每页希望显示的条数
      prePage: 10,
    };
  },
  computed: {
    showGoods() {
      // 我们希望在页面中展示的数据
      return this.goods.slice(0, this.prePage);
    },
  },
};
</script>

<style>
</style>

